import 'package:flutter/material.dart';


class InstagStories extends StatelessWidget {

  final topText = Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Text("Stories", style: TextStyle(fontWeight: FontWeight.bold),),
      Row(
        children: <Widget>[
          Icon(Icons.play_arrow),
          Text("Watch All", style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      )
    ],
  );

  final stories = Expanded(
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 10,
      itemBuilder: (context, index){
        return Stack(
          alignment: Alignment.bottomRight,
          children: <Widget>[
            Container(
              height: 60.0,
              width: 60.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: new DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage("https://randomuser.me/api/portraits/women/77.jpg")
                )
              ),
              margin: const EdgeInsets.symmetric(horizontal: 8.0),
            ),
            index == 0 ? Positioned(
              right: 10,
              child: CircleAvatar(
                backgroundColor: Colors.blueAccent,
                radius: 10,
                child: Icon(Icons.add, size: 14,)
              ),
            ) : Container()
          ],
        );
      },
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      margin: const EdgeInsets.all(16),
      child: new Column(
        children: <Widget>[
          topText,
          stories,
        ],
      ),
    );
  }
}